import { Component, OnInit, Output, EventEmitter, Input, Injector } from '@angular/core';
import {
  TaskStatus,
  TaskPeriod,
  TaskType,
  TaskListOption,
  TaskCategory,
} from '../../services/task.service';
import { ListOption } from 'app/modules/base/api-base';
import { ActivatedRouteSnapshot, Router, ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { Zone } from 'app/modules/zone/services/zone.service';

@Component({
  selector: 'm-list-header',
  templateUrl: './list-header.component.html',
  styleUrls: ['./list-header.component.scss'],
})
export class ListHeaderComponent implements OnInit {
  @Input() taskStatusList: TaskStatus[] = [TaskStatus.All];

  @Input() taskPeriodList: TaskPeriod[] = [
    TaskPeriod.All,
    TaskPeriod.Now,
    TaskPeriod.Timing,
    TaskPeriod.Schedule,
  ];

  @Input() taskTypeList: TaskType[] = [
    TaskType.All,
    TaskType.Policy,
    TaskType.Script,
    TaskType.SystemUpgrade,
    TaskType.SoftwareUpgrade,
    TaskType.Message,
    TaskType.UsbAuth,
    TaskType.DetelePc,
    TaskType.Client,

  ];

  @Output() optionChange = new EventEmitter<TaskListOption>();

  areaList$ = this.route.data.pipe(
    map(data => {
      return data['zone_list'].list.filter(zone => zone.id);
    }),
  );

  activeAreaID: number;
  selectedTaskType = TaskType.All;
  selectedPeriodType = TaskPeriod.All;
  selectedTaskStatus = TaskStatus.All;

  constructor(private router: Router, private route: ActivatedRoute) {
    this.route.queryParamMap.subscribe(params => {
      this.selectedTaskType = Number(params.get('type') || TaskType.All);
      this.selectedPeriodType = Number(params.get('period_type') || TaskPeriod.All);
      this.selectedTaskStatus = Number(params.get('status') || TaskStatus.All);
      this.activeAreaID = Number(params.get('area_id') || 0);
    });
  }

  onActiveAreaIDChanged(id: number) {
    if (this.activeAreaID == id) {
      return;
    }
    this.activeAreaID = id;
    console.log('updateAll on id change:', id, this.activeAreaID);
    this.updateAll();
  }

  onPeriodTypeChanged(periodType: TaskPeriod) {
    this.selectedPeriodType = periodType;
    this.updateAll();
  }
  onTaskStatusChange(status: TaskStatus) {
    this.selectedTaskStatus = status;
    this.updateAll();
  }
  onTaskTypeChange(type: TaskType) {
    this.selectedTaskType = type;
    this.updateAll();
  }

  updateAll() {
    this.update(
      this.activeAreaID,
      this.selectedTaskStatus,
      this.selectedPeriodType,
      this.selectedTaskType,
    );
  }

  update(areaID: number, status: TaskStatus, period: TaskPeriod, taskType: TaskType) {
    let opt = {} as TaskListOption;
    opt.order = 'desc';

    if (areaID != 0) {
      opt.area_id = areaID;
    }

    if (status != TaskStatus.All) {
      opt.status = [status];
    }
    if (period != TaskPeriod.All) {
      opt.period_type = period;
    }
    if (taskType != TaskType.All) {
      opt.type = taskType;
    }
    this.optionChange.emit(opt);
  }

  ngOnInit() {}
}
